<html>
<head>
<title>Demo 5 : Editor Styles</title>

<style type="text/css">
#myInstance1 {
	border: 2px dashed #0000ff;
}

.nicEdit-selected {
	border: 2px solid #0000ff !important;
}

.nicEdit-panel {
	background-color: #fff !important;
}

.nicEdit-button {
	background-color: #fff !important;
}
</style>

</head>
<body>

	<div id="menu"></div>

	<div id="intro">
		<p>NicEdit instances and the panel can be styled using CSS classes
			to fit the look and feel of your site.</p>

	</div>

	<div id="sample">

		<script src="../nicEdit.js" type="text/javascript"></script>
		<script type="text/javascript">
			bkLib.onDomLoaded(function() {
				var myNicEditor = new nicEditor();
				myNicEditor.setPanel('myNicPanel');
				myNicEditor.addInstance('myInstance1');
			});
		</script>

		This is text above the Panel
		<div id="myNicPanel" style="width: 350px;"></div>
		This is text below the Panel <br /> <br />

		<h4>Selected Style Example</h4>
		<div id="myInstance1"
			style="font-size: 16px; background-color: #ccc; padding: 3px; width: 400px;">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna
			dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna.
			Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum
			porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec
			lorem. Etiam eget metus sed justo ultricies rhoncus. Praesent rhoncus
			arcu non dolor. Proin eu eros. Curabitur vehicula. Nulla vehicula
			lectus eget eros. Nulla vel nulla at dui dictum mollis. Etiam purus
			felis, pretium vel, eleifend id, consectetuer nec, purus. Vivamus
			pretium orci ac sapien. Etiam at tortor. Nunc tincidunt mi sed
			sapien. Etiam lacus pede, fermentum eu, blandit ac, congue eget,
			metus. Quisque sed sem. Mauris at sapien. Ut luctus.</div>
	</div>
</body>
</html>
